<template>
  <div class="media-file-panel">
    <div class="file-header">
      <h3 class="file-title">设备列表</h3>
      
      <!-- Tab切换 -->
      <div class="tab-container">
        <div 
          class="tab-item" 
          :class="{ active: activeTab === 1 }"
          @click="switchTab(1)"
        >
          航线照片
        </div>
        <div 
          class="tab-item" 
          :class="{ active: activeTab === 2 }"
          @click="switchTab(2)"
        >
          航线视频
        </div>
      </div>
    </div>
    
    <div class="search-container">
      <div class="search-form">
        <!-- 第一行：时间范围和照片 -->
        <div class="search-row">
          <!-- 时间范围 -->
          <div class="search-item">
            <el-date-picker
              v-model="searchParams.dateRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY年MM月DD日 HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              class="search-date-range-picker"
              @change="handleDateRangeChange"
              style="width: 250px; background: transparent;"
            />
          </div>
          
          <!-- 照片搜索 -->
          <div class="search-item">
            <el-input
              v-model="searchParams.photo"
              placeholder="请输入照片"
              class="search-input"
              clearable
              @input="handleSearchChange"
              @clear="handleSearchChange"
            />
          </div>
        </div>
        
        <!-- 第二行：关键词和按钮 -->
        <div class="search-row">
          <!-- 关键词搜索 -->
          <div class="search-item">
            <el-input
              v-model="searchParams.keyword"
              placeholder="请输入文件名关键词"
              class="search-input"
              clearable
              @input="handleSearchChange"
              @clear="handleSearchChange"
            />
          </div>
          
          <!-- 搜索和操作按钮 -->
          <div class="search-buttons">
            <el-button 
              type="primary" 
              @click="handleBatchDownload" 
              class="search-btn"
              :disabled="selectedFileIds.length === 0"
            >
              下载 ({{ selectedFileIds.length }})
            </el-button>
            <el-button 
              @click="handleBatchDelete" 
              class="reset-btn"
              :disabled="selectedFileIds.length === 0"
            >
              删除 ({{ selectedFileIds.length }})
            </el-button>
          </div>
        </div>
      </div>
    </div>
    
    <div class="file-container" v-loading="loading">
      <div class="file-top">
        <span>
          <input 
            type="checkbox" 
            class="file-checkbox"
            :checked="isAllSelected"
            :indeterminate="isIndeterminate"
            @change="handleSelectAll"
          />
        </span>
        <span>序号</span>
        <span>照片</span>
        <span>时间</span>
        <span>操作</span>
      </div>
      
      <div class="file-list">
        <!-- 没有选择设备时的提示 -->
        <div v-if="!selectedDevice" class="no-device-selected">
          <div class="no-device-text">请先选择设备</div>
        </div>
        
        <!-- 没有文件时的提示 -->
        <div v-else-if="mediaFiles.length === 0 && !loading" class="no-files">
          <div class="no-files-text">
            该设备暂无{{ activeTab === 1 ? '照片' : '视频' }}文件
          </div>
        </div>
        
        <!-- 文件列表 -->
        <div 
          v-else
          v-for="(file, index) in mediaFiles" 
          :key="file.id || file.file_id || index"
          class="file-item"
        >
          <div class="file-item-select">
            <input 
              type="checkbox" 
              :value="file.id || file.file_id || index"
              :checked="selectedFileIds.includes(file.id || file.file_id || index)"
              @change="handleFileSelect(file, $event)"
              class="file-checkbox"
            />
          </div>
          <div class="file-item-number">
            {{ index + 1 }}
          </div>
          <div class="file-item-img">
            <!-- 如果是图片且有缩略图URL -->
            <img 
              v-if="activeTab === 1 && file.file_url" 
              :src="file.file_url" 
              :alt="file.file_name || `图片${index + 1}`"
              class="thumbnail-image"
              @error="handleImageError"
            />
            <!-- 如果是视频或没有缩略图，显示文件名或占位符 -->
            <div v-else class="file-placeholder">
              <span class="file-name">{{ file.file_name || `${activeTab === 1 ? '图片' : '视频'}${index + 1}` }}</span>
            </div>
          </div>
          <div class="file-item-time">
            <div class="time-container">
              <div class="time-date">{{ formatTime(file.create_time || file.upload_time).date }}</div>
              <div class="time-clock">{{ formatTime(file.create_time || file.upload_time).time }}</div>
            </div>
          </div>
          <div class="file-item-operate">
            <div class="action-buttons">
              <img 
                src="@/assets/images/datamanage_device_download.png" 
                alt="下载" 
                class="action-btn download-btn"
                @click="handleDownload(file)"
                title="下载"
              />
              <img 
                src="@/assets/images/datamanage_device_delete.png" 
                alt="删除" 
                class="action-btn delete-btn"
                @click="handleDelete(file)"
                title="删除"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div v-if="total > 0" class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'
import { smartDownload } from '@/utils/download'
import { useUserStore } from '@/stores/modules/user'

// 响应式数据
const activeTab = ref(1) // 当前激活的tab，默认为航线照片
const userStore = useUserStore()
const selectedDevice = ref(null) // 当前选中的设备
const mediaFiles = ref([]) // 媒体文件列表
const loading = ref(false)
const selectedFileIds = ref([]) // 当前选中的文件ID列表
const selectedFiles = ref([]) // 当前选中的文件对象列表

// 分页相关数据
const currentPage = ref(1) // 当前页码
const pageSize = ref(10) // 每页显示数量
const total = ref(0) // 总数量

// 搜索参数
const searchParams = ref({
  dateRange: null, // 时间范围 [开始时间, 结束时间]
  photo: '', // 照片名称
  keyword: ''
})

// 计算属性：是否全选
const isAllSelected = computed(() => {
  return mediaFiles.value.length > 0 && selectedFileIds.value.length === mediaFiles.value.length
})

// 计算属性：是否部分选中（用于显示不确定状态）
const isIndeterminate = computed(() => {
  return selectedFileIds.value.length > 0 && selectedFileIds.value.length < mediaFiles.value.length
})

// 切换tab
const switchTab = (tabValue) => {
  if (activeTab.value === tabValue) return
  
  activeTab.value = tabValue
  console.log('切换到tab:', tabValue === 1 ? '航线照片' : '航线视频')
  
  // 切换tab时清空选择
  selectedFileIds.value = []
  selectedFiles.value = []
  
  // 重置分页
  currentPage.value = 1
  
  // 重置搜索条件
  searchParams.value = {
    dateRange: null,
    photo: '',
    keyword: ''
  }
  
  // 切换tab时重新加载文件列表
  if (selectedDevice.value) {
    fetchMediaFiles()
  }
}

// 处理全选/取消全选
const handleSelectAll = (event) => {
  if (event.target.checked) {
    // 全选
    selectedFileIds.value = mediaFiles.value.map(file => file.id || file.file_id || mediaFiles.value.findIndex(f => f === file))
    selectedFiles.value = [...mediaFiles.value]
  } else {
    // 取消全选
    selectedFileIds.value = []
    selectedFiles.value = []
  }
  
  console.log('全选状态变化:', event.target.checked, '选中文件数量:', selectedFileIds.value.length)
}

// 处理文件选择
const handleFileSelect = (file, event) => {
  const fileId = file.id || file.file_id || mediaFiles.value.findIndex(f => f === file)
  
  if (event.target.checked) {
    // 添加到选中列表
    if (!selectedFileIds.value.includes(fileId)) {
      selectedFileIds.value.push(fileId)
      selectedFiles.value.push(file)
    }
  } else {
    // 从选中列表移除
    const index = selectedFileIds.value.indexOf(fileId)
    if (index > -1) {
      selectedFileIds.value.splice(index, 1)
      selectedFiles.value.splice(selectedFiles.value.findIndex(f => (f.id || f.file_id) === fileId), 1)
    }
  }
  
  console.log('文件选择变化:', file.file_name || fileId, '选中状态:', event.target.checked)
  console.log('当前选中文件数量:', selectedFileIds.value.length)
  
  // 发送文件选择事件，其他组件可以监听
  const customEvent = new CustomEvent('media-files-selected', {
    detail: {
      files: selectedFiles.value,
      fileIds: selectedFileIds.value,
      device: selectedDevice.value,
      fileType: activeTab.value
    }
  })
  window.dispatchEvent(customEvent)
}

// 格式化时间
const formatTime = (timeStr) => {
  if (!timeStr) return { date: '--', time: '--' }
  
  try {
    const date = new Date(timeStr)
    if (isNaN(date.getTime())) return { date: '--', time: '--' }
    
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    
    return {
      date: `${year}-${month}-${day}`,
      time: `${hours}:${minutes}`
    }
  } catch (error) {
    console.error('时间格式化失败:', error)
    return { date: '--', time: '--' }
  }
}

// 获取媒体文件列表
const fetchMediaFiles = async () => {
  if (!selectedDevice.value) {
    console.log('未选择设备，无法获取媒体文件')
    return
  }
  
  try {
    loading.value = true
    
    // 获取工作空间ID
    const workspaceId = userStore.user?.workspaceId || selectedDevice.value.workspace_id
    
    if (!workspaceId) {
      ElMessage.error('未获取到工作空间ID，请重新登录')
      return
    }
    
    // 获取设备序列号
    const deviceSn = selectedDevice.value.drone_sn || selectedDevice.value.device_sn || selectedDevice.value.sn
    
    if (!deviceSn) {
      ElMessage.error('设备序列号不存在')
      return
    }
    
    console.log('获取媒体文件列表:', { workspaceId, deviceSn, activeTab: activeTab.value, page: currentPage.value })
    
    // 调用媒体文件接口
    const response = await request({
      url: `/media/api/v1/files/${workspaceId}/${deviceSn}/files`,
      method: 'get',
      params: {
        page: currentPage.value,
        pageSize: pageSize.value,
        fileType: activeTab.value,
        startDate: searchParams.value.dateRange ? searchParams.value.dateRange[0] : null,
        endDate: searchParams.value.dateRange ? searchParams.value.dateRange[1] : null,
        photo: searchParams.value.photo,
        keyword: searchParams.value.keyword
      }
    })
    
    console.log('媒体文件API响应:', response)
    
    // 处理响应数据
    let files = []
    if (response && response.data) {
      files = response.data.list || []
      total.value = response.data.total || 0
    }
    
    mediaFiles.value = files
    
    // 清空之前的选择（因为数据可能已经变化）
    selectedFileIds.value = []
    selectedFiles.value = []
    
    console.log('媒体文件列表:', mediaFiles.value)
    console.log('总数量:', total.value)
    
    if (files.length === 0 && currentPage.value === 1) {
      ElMessage.info(`该设备暂无${activeTab.value === 1 ? '照片' : '视频'}文件`)
    }
    
  } catch (error) {
    console.error('获取媒体文件失败:', error)
    ElMessage.error('获取媒体文件失败')
    mediaFiles.value = []
    total.value = 0
    selectedFileIds.value = []
    selectedFiles.value = []
  } finally {
    loading.value = false
  }
}

// 处理分页变化
const handlePageChange = (page) => {
  currentPage.value = page
  // 切换页面时清空选择
  selectedFileIds.value = []
  selectedFiles.value = []
  fetchMediaFiles()
}

// 处理每页数量变化
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1 // 重置到第一页
  // 切换页面大小时清空选择
  selectedFileIds.value = []
  selectedFiles.value = []
  fetchMediaFiles()
}

// 监听设备选择事件
const handleDeviceSelected = (event) => {
  console.log('MediaFile 接收到设备选择事件:', event.detail)
  
  if (event.detail && event.detail.device) {
    selectedDevice.value = event.detail.device
    console.log('选中设备:', selectedDevice.value)
    
    // 重置分页
    currentPage.value = 1
    
    // 重置搜索条件
    searchParams.value = {
      dateRange: null,
      photo: '',
      keyword: ''
    }
    
    // 清空选择
    selectedFileIds.value = []
    selectedFiles.value = []
    
    // 获取该设备的媒体文件
    fetchMediaFiles()
  }
}

// 处理搜索条件变化
const handleSearchChange = () => {
  // 搜索条件变化时可以做一些处理，比如防抖等
  console.log('搜索条件变化:', searchParams.value)
}

// 处理日期范围变化
const handleDateRangeChange = (dateRange) => {
  console.log('日期范围变化:', dateRange)
  searchParams.value.dateRange = dateRange
}

// 处理搜索（现在用于重新加载数据）
const handleSearch = () => {
  currentPage.value = 1 // 重置到第一页
  selectedFileIds.value = [] // 清空选择
  selectedFiles.value = []
  fetchMediaFiles()
}

// 批量下载
const handleBatchDownload = async () => {
  if (selectedFileIds.value.length === 0) {
    ElMessage.warning('请先选择要下载的文件')
    return
  }
  
  try {
    console.log('批量下载文件:', selectedFiles.value)
    
    // 获取工作空间ID
    const workspaceId = userStore.user?.workspaceId || selectedDevice.value?.workspace_id
    
    if (!workspaceId) {
      ElMessage.error('未获取到工作空间ID，请重新登录')
      return
    }
    
    // 构建文件名
    const fileType = activeTab.value === 1 ? '照片' : '视频'
    const deviceName = selectedDevice.value?.drone_name || '设备'
    const fileName = `${deviceName}_${fileType}_批量下载_${Date.now()}.zip`
    
    // 构建下载URL
    const downloadUrl = `/media/api/v1/files/${workspaceId}/files/download`
    
    // 构建备用直接下载URL（用于iframe方式）
    const token = localStorage.getItem('auth_token')
    const fallbackUrl = `${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080/api'}${downloadUrl}?fileIds=${selectedFileIds.value.join(',')}&batch=true${token ? `&token=${encodeURIComponent(token)}` : ''}`
    
    ElMessage.info(`开始批量下载 ${selectedFileIds.value.length} 个文件...`)
    
    // 使用智能下载函数
    await smartDownload({
      url: downloadUrl,
      method: 'post',
      data: selectedFileIds.value,
      fileName: fileName,
      fallbackUrl: fallbackUrl
    })
    
  } catch (error) {
    console.error('批量下载失败:', error)
    // 错误处理已在smartDownload中处理
  }
}

// 批量删除
const handleBatchDelete = async () => {
  if (selectedFileIds.value.length === 0) {
    ElMessage.warning('请先选择要删除的文件')
    return
  }
  
  try {
    console.log('批量删除文件:', selectedFiles.value)
    
    // 获取工作空间ID
    const workspaceId = userStore.user?.workspaceId || selectedDevice.value?.workspace_id
    
    if (!workspaceId) {
      ElMessage.error('未获取到工作空间ID，请重新登录')
      return
    }
    
    // 确认删除
    const result = await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedFileIds.value.length} 个文件吗？此操作不可撤销。`,
      '批量删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    if (result !== 'confirm') return
    
    // 调用批量删除接口
    await request({
      url: `/media/api/v1/files/${workspaceId}/remove`,
      method: 'post',
      data: selectedFileIds.value
    })
    
    ElMessage.success(`成功删除 ${selectedFileIds.value.length} 个文件`)
    
    // 清空选择
    selectedFileIds.value = []
    selectedFiles.value = []
    
    // 重新加载文件列表
    await fetchMediaFiles()
    
  } catch (error) {
    console.error('批量删除失败:', error)
    ElMessage.error('批量删除失败')
  }
}

// 组件挂载时添加事件监听
onMounted(() => {
  window.addEventListener('device-selected-for-media', handleDeviceSelected)
  console.log('MediaFile 组件已挂载，监听设备选择事件')
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('device-selected-for-media', handleDeviceSelected)
  console.log('MediaFile 组件已卸载，移除设备选择事件监听')
})

// 处理图片加载错误
const handleImageError = (event) => {
  console.log('图片加载失败:', event.target.src)
  // 可以设置默认图片或隐藏图片
  event.target.style.display = 'none'
}

// 处理单个文件下载
const handleDownload = async (file) => {
  try {
    console.log('下载文件:', file)
    
    // 获取工作空间ID
    const workspaceId = userStore.user?.workspaceId || selectedDevice.value?.workspace_id
    
    if (!workspaceId) {
      ElMessage.error('未获取到工作空间ID，请重新登录')
      return
    }
    
    // 获取文件ID
    const fileId = file.id || file.file_id
    if (!fileId) {
      ElMessage.error('文件ID不存在')
      return
    }
    
    // 构建下载URL和文件名
    const fileName = file.file_name || `${activeTab.value === 1 ? '照片' : '视频'}_${Date.now()}`
    const downloadUrl = `/media/api/v1/files/${workspaceId}/files/download`
    
    // 构建备用直接下载URL（用于iframe方式）
    const token = localStorage.getItem('auth_token')
    const fallbackUrl = `${import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080/api'}${downloadUrl}/${fileId}${token ? `?token=${encodeURIComponent(token)}` : ''}`
    
    ElMessage.info('开始下载文件...')
    
    // 使用智能下载函数
    await smartDownload({
      url: downloadUrl,
      method: 'post',
      data: [fileId],
      fileName: fileName,
      fallbackUrl: fallbackUrl
    })
    
  } catch (error) {
    console.error('下载文件失败:', error)
    // 错误处理已在smartDownload中处理
  }
}

// 处理单个文件删除
const handleDelete = async (file) => {
  try {
    console.log('删除文件:', file)
    
    // 获取工作空间ID
    const workspaceId = userStore.user?.workspaceId || selectedDevice.value?.workspace_id
    
    if (!workspaceId) {
      ElMessage.error('未获取到工作空间ID，请重新登录')
      return
    }
    
    // 确认删除
    const result = await ElMessageBox.confirm(
      `确定要删除文件 "${file.file_name || '未命名文件'}" 吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    if (result !== 'confirm') return
    
    // 调用删除接口
    await request({
      url: `/media/api/v1/files/${workspaceId}/remove`,
      method: 'post',
      data: [
        file.id || file.file_id,
      ]
    })
    
    ElMessage.success('文件删除成功')
    
    // 从选中列表中移除（如果存在）
    const fileId = file.id || file.file_id
    const index = selectedFileIds.value.indexOf(fileId)
    if (index > -1) {
      selectedFileIds.value.splice(index, 1)
      selectedFiles.value.splice(selectedFiles.value.findIndex(f => (f.id || f.file_id) === fileId), 1)
    }
    
    // 重新加载文件列表
    await fetchMediaFiles()
    
  } catch (error) {
    console.error('删除文件失败:', error)
    ElMessage.error('删除文件失败')
  }
}
</script>

<style lang="scss" scoped>
.media-file-panel {
  width: 404px;
  height: 903px;
  background: url('@/assets/images/device_airline_bg.png') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .file-header {
    width: 100%;
    height: 38px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
    padding: 0 16px;
    box-sizing: border-box;
    transition: opacity 0.3s ease;
    
    .file-title {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 2px;
      line-height: 18px;
      background: linear-gradient(180deg, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 40%, rgba(59, 135, 202, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));
    }

    // Tab容器样式，完全仿照DeviceList.vue
    .tab-container {
      display: flex;
      border-bottom: 1px solid rgba(90, 120, 140, 1);
      
      .tab-item {
        width: 80px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
        cursor: pointer;
        border-radius: 4px;
        
        &:hover {
          color: rgba(0, 255, 244, 1);
        }
        
        &.active {
          color: rgba(0, 255, 244, 1);
          background: url('@/assets/images/tab_item_active.png') no-repeat;
          background-size: 100% 1px;
          background-position: center bottom;
          transition: none !important;
        }
      }
    }
  }

  .search-container {
    padding: 10px 16px;
    background: rgba(5, 140, 187, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    .search-form {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 0;
    
      .search-row {
        display: flex;
        gap: 20px;
        align-items: flex-end;
        margin-bottom: 16px;
      }
      
      .search-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
        
        .search-label {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.8);
          font-weight: 500;
        }
        
        .search-date-range-picker {
          width: 160px;
          
          :deep(.el-range-editor.el-input__wrapper) {
            background: transparent !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            box-shadow: none !important;
            
            &:hover {
              border-color: rgba(0, 255, 244, 0.5) !important;
            }
            
            &.is-focus {
              border-color: rgba(0, 255, 244, 1) !important;
              box-shadow: 0 0 0 2px rgba(0, 255, 244, 0.2) !important;
            }
          }
          
          :deep(.el-range-input) {
            color: rgba(255, 255, 255, 0.9) !important;
            background: transparent !important;
          }
          
          :deep(.el-range-separator) {
            color: rgba(255, 255, 255, 0.7) !important;
          }
          
          // 额外确保透明背景
          :deep(.el-date-editor) {
            background: transparent !important;
          }
          
          :deep(.el-date-editor .el-input__wrapper) {
            background: transparent !important;
          }
        }
        
        .search-input {
          width: 160px;
         
          ::v-deep {
            .el-input__wrapper {
              background: rgba(255, 255, 255, 0.1);
              border: 1px solid rgba(255, 255, 255, 0.2);
              box-shadow: none;
              
              &:hover {
                border-color: rgba(0, 255, 244, 0.5);
              }
              
              &.is-focus {
                border-color: rgba(0, 255, 244, 1);
                box-shadow: 0 0 0 2px rgba(0, 255, 244, 0.2);
              }
              
              .el-input__inner {
                color: rgba(255, 255, 255, 0.9);
                
                &::placeholder {
                  color: rgba(255, 255, 255, 0.5);
                }
              }
            }
          }
        }
      }
      
      .search-buttons {
        display: flex;
        gap: 8px;
        margin-left: auto;
        
        .search-btn {
          background: linear-gradient(90deg, rgba(0, 255, 244, 0.8) 0%, rgba(0, 200, 200, 0.8) 100%);
          border: none;
          color: #ffffff;
          font-weight: 500;
          
          &:hover:not(:disabled) {
            background: linear-gradient(90deg, rgba(0, 255, 244, 1) 0%, rgba(0, 200, 200, 1) 100%);
          }
          
          &:disabled {
            background: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.3);
            cursor: not-allowed;
          }
        }
        
        .reset-btn {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: rgba(255, 255, 255, 0.8);
          
          &:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.3);
          }
          
          &:disabled {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.3);
            cursor: not-allowed;
          }
        }
      }
    }
  }

  .file-container{
    padding: 10px;
    flex: 1;
    overflow-y: auto;

    .file-top{
      width: 100%;
      height: 30px;
      background: rgba(5, 140, 187, 0.3);
      display: flex;
      
      span {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #ffffff !important;
        font-weight: 500;
        opacity: 1;
        
        &:nth-child(1) { // 选择
          width: 50px;
          
          .file-checkbox {
            width: 16px;
            height: 16px;
            cursor: pointer;
            accent-color: rgba(0, 255, 244, 1);
            
            &:hover {
              transform: scale(1.1);
            }
          }
        }
        
        &:nth-child(2) { // 序号
          width: 50px;
        }
        
        &:nth-child(3) { // 照片
          flex: 1;
        }
        
        &:nth-child(4) { // 时间
          width: 120px;
        }
        
        &:nth-child(5) { // 操作
          width: 80px;
        }
      }
    }
    
    .file-list{
      max-height: 700px;
      overflow-y: auto;

      // 没有选择设备的提示
      .no-device-selected {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        
        .no-device-text {
          font-size: 16px;
          color: rgba(255, 255, 255, 0.6);
          text-align: center;
        }
      }

      // 没有文件的提示
      .no-files {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        
        .no-files-text {
          font-size: 16px;
          color: rgba(255, 255, 255, 0.6);
          text-align: center;
        }
      }

      .file-item{
        margin-top: 10px;
        width: 100%;
        height: 84px;
        opacity: 1;
        background: linear-gradient(90deg, rgba(5, 140, 187, 0.11) 0%, rgba(5, 173, 187, 0.03) 100%);
        display: flex;
        transition: all 0.3s ease;
        
        &:hover {
          background: linear-gradient(90deg, rgba(5, 140, 187, 0.2) 0%, rgba(5, 173, 187, 0.1) 100%);
          transform: translateX(2px);
        }
        
        .file-item-select {
          width: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          
          .file-checkbox {
            width: 16px;
            height: 16px;
            cursor: pointer;
            accent-color: rgba(0, 255, 244, 1);
            
            &:hover {
              transform: scale(1.1);
            }
          }
        }
        
        .file-item-number {
          width: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 12px;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          vertical-align: top;
        }
        
        .file-item-img {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          
          .thumbnail-image {
            max-height: 70px;
            object-fit: cover;
            border: 1px solid rgba(255, 255, 255, 0.2);
          }
          
          .file-placeholder {
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.2);
            
            .file-name {
              font-size: 10px;
              color: rgba(255, 255, 255, 0.8);
              text-align: center;
              word-break: break-all;
              line-height: 1.2;
              padding: 2px;
            }
          }
        }
        
        .file-item-time {
          width: 120px;
          display: flex;
          justify-content: center;
          align-items: center;
          
          .time-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            
            .time-date {
              font-size: 12px;
              color: rgba(255, 255, 255, 0.8);
              line-height: 1.2;
            }
            
            .time-clock {
              font-size: 11px;
              color: rgba(255, 255, 255, 0.6);
              line-height: 1.2;
            }
          }
        }
        
        .file-item-operate{
          width: 80px;
          display: flex;
          justify-content: center;
          align-items: center;
          
          .action-buttons {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
          }
          
          .action-btn {
            width: 20px;
            height: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            object-fit: contain;
            
            &:hover {
              transform: scale(1.2);
              filter: brightness(1.2);
            }
            
            &:active {
              transform: scale(0.95);
            }
          }
          
          .download-btn:hover {
            filter: brightness(1.2) saturate(1.2);
          }
          
          .delete-btn:hover {
            filter: brightness(1.2) saturate(1.2);
          }
        }
      }

      // 滚动条样式
      &::-webkit-scrollbar {
        width: 4px;
      }
      
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      
      &::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
        
        &:hover {
          background: rgba(255, 255, 255, 0.5);
        }
      }
    }

    // 分页样式
    .pagination-container {
      display: flex;
      justify-content: center;
      padding: 16px 0;
      
      :deep(.el-pagination) {
        --el-pagination-font-size: 12px;
        --el-pagination-bg-color: transparent;
        --el-pagination-text-color: rgba(255, 255, 255, 0.8);
        --el-pagination-border-radius: 4px;
        --el-pagination-button-color: rgba(255, 255, 255, 0.6);
        --el-pagination-button-bg-color: rgba(255, 255, 255, 0.1);
        --el-pagination-button-disabled-color: rgba(255, 255, 255, 0.3);
        --el-pagination-button-disabled-bg-color: transparent;
        --el-pagination-hover-color: rgba(0, 255, 244, 1);
        --el-pagination-hover-bg-color: rgba(0, 255, 244, 0.2);
        
        .el-pager li {
          background: rgba(255, 255, 255, 0.1);
          color: rgba(255, 255, 255, 0.8);
          border: 1px solid rgba(255, 255, 255, 0.2);
          
          &:hover {
            background: rgba(0, 255, 244, 0.2);
            color: rgba(0, 255, 244, 1);
          }
          
          &.is-active {
            background: rgba(0, 255, 244, 0.8);
            color: #ffffff;
          }
        }
        
        .btn-prev,
        .btn-next {
          background: rgba(255, 255, 255, 0.1);
          color: rgba(255, 255, 255, 0.8);
          border: 1px solid rgba(255, 255, 255, 0.2);
          
          &:hover {
            background: rgba(0, 255, 244, 0.2);
            color: rgba(0, 255, 244, 1);
          }
        }
        
        .el-pagination__total,
        .el-pagination__jump {
          color: rgba(255, 255, 255, 0.8);
        }
        
        .el-select .el-input {
          --el-input-bg-color: rgba(255, 255, 255, 0.1);
          --el-input-border-color: rgba(255, 255, 255, 0.2);
          --el-input-text-color: rgba(255, 255, 255, 0.9);
        }
      }
    }
  }
}
</style> 